var app = new Vue({
    el: "#app",
    data: function() {
        return {
            // 弹层显示
            isCover: false,
            // tag实例
            tagModule: null,
            // 初始数据
            initData: {
                outerData: [{
                    text: '西洋乐器',
                    bgColor: "#666",
                    radius: 80,
                    textColor: '#f2f2f2'
                }, {
                    text: '主播课程',
                    bgColor: "#666",
                    radius: 80,
                    textColor: '#f2f2f2'
                }, {
                    text: '民主乐器',
                    bgColor: "#666",
                    radius: 80,
                    textColor: '#f2f2f2'
                }, {
                    text: '管弦乐器',
                    bgColor: "#666",
                    radius: 80,
                    textColor: '#f2f2f2'
                }],
                innerData: [{
                    text: '古筝',
                    bgColor: "#666",
                    radius: 60,
                    textColor: '#f2f2f2'
                }, {
                    text: '素描',
                    bgColor: "#666",
                    radius: 60,
                    textColor: '#f2f2f2'
                }, {
                    text: '琵琶',
                    bgColor: "#666",
                    radius: 60,
                    textColor: '#f2f2f2'
                }, {
                    text: '美声',
                    bgColor: "#666",
                    radius: 60,
                    textColor: '#f2f2f2'
                }, {
                    text: '二胡',
                    bgColor: "#666",
                    radius: 60,
                    textColor: '#f2f2f2'
                }],
            },
            options: {
                outerBoxRadius: 500,
                innerBoxRadius: 300
            },
            callback: {
                onClick: function(e) {
                    $(e.target).toggleClass('z-active')
                }
            }

        }
    },
    watch: {
        initData: {
            deep: true,
            handler: function() {
                this.tagModule.update(".m-circle");
            }
        },
        options: {
            deep: true,
            handler: function() {
                this.tagModule.update(".m-circle");
            }
        },
    },
    methods: {
        initPicker: function() {
            var _this = this;
            $(".tag-bg-color").each(function(index, el) {
                $(this).spectrum({
                    color: $(el).data('color'),
                    move: function(color) {
                        _this.initData.outerData[index].bgColor = "#" + color.toHex();
                    },
                    hide: function(color) {
                        _this.initData.outerData[index].bgColor = "#" + color.toHex();
                    }
                });
            })
            $(".tag-color").each(function(index, el) {
                $(this).spectrum({
                    color: $(el).data('color'),
                    move: function(color) {
                        _this.initData.outerData[index].textColor = "#" + color.toHex();
                    },
                    hide: function(color) {
                        _this.initData.outerData[index].textColor = "#" + color.toHex();
                    }
                });
            })
            $(".highlight-color").each(function(index, el) {
                $(this).spectrum({
                    color: $(el).data('color'),
                    move: function(color) {},
                    hide: function(color) {}
                });
            })
        },
        changeTagBgColor: function(e, tinycolor) {
            console.log(tinycolor)
        },
        changeTagColor: function(e, tinycolor) {
            console.log(tinycolor)
        },
        initPreview: function() {
            this.tagModule = new Circlemodule(this.initData, this.options, this.callback);
            this.tagModule.init(".m-circle");
        },
        addOuterCircle: function() {
            this.initData.outerData.push({
                text: 'title',
                bgColor: "#666",
                radius: 80,
                textColor: '#f2f2f2'
            })
        },
        addInnerCircle: function() {
            this.initData.innerData.push({
                text: 'title',
                bgColor: "#666",
                radius: 60,
                textColor: '#f2f2f2'
            })
        },
        deleteOuterCircle: function() {
            this.initData.outerData.pop();
        },
        deleteInnerCircle: function() {
            this.initData.innerData.pop();
        },
        showCode: function() {
            var initData = JSON.stringify(this.initData)
            var options = JSON.stringify(this.options)
            var callback = this.callback.onClick

            var code = `var circleTag = new Circlemodule(${initData}, ${options}, {onClick:${callback}});`;
            $(".code-js").text(code);

            this.isCover = true;

        },
        closeCode: function() {
            this.isCover = false;
        }
    },
    mounted: function() {
        this.initPicker();
        this.initPreview();

    }
})